<template>
    <ModalComponent @open="handleOpen" modal-name="score-list-modal" title="得分情况" :close-on-click-modal="false" size="960">
        <div class="score-list">
            <div class="subjectivity-container">
                <el-card class="question-container" shadow="never" v-for="item, index in data" :key="item.id">
                    <div class="title-contianer">
                        <div class="head">
                            <el-text class="title">题目{{ index * 1 + 1 }}</el-text>
                        </div>
                        <el-divider style="margin: 0;"></el-divider>
                        <div class="item-block" style="padding-top: 16px;">
                            <div v-html="item.stem">
                            </div>
                            <div v-if="item.imgUrl">
                                <el-image :src="item.imgUrl"></el-image>
                            </div>
                        </div>
                    </div>
                    <!-- 选项 -->
                    <div v-if="item.subjectType != 2">
                        <div class="select-container">
                            <el-radio-group size="large" :model-value="item.studentSelect" v-if="item.subjectType != 3">
                                <el-radio label="A" v-if="item.caseA">
                                    <OptionComponent sort="A" :content="item.caseA" />
                                </el-radio>
                                <el-radio label="B" v-if="item.caseB">
                                    <OptionComponent sort="B" :content="item.caseB" />
                                </el-radio>
                                <el-radio label="C" v-if="item.caseC">
                                    <OptionComponent sort="C" :content="item.caseC" />
                                </el-radio>
                                <el-radio label="D" v-if="item.caseD">
                                    <OptionComponent sort="D" :content="item.caseD" />
                                </el-radio>

                            </el-radio-group>
                            <el-checkbox-group size="large" :model-value="item.studentSelect.split(',')" v-else>
                                <el-checkbox label="A" v-if="item.caseA">
                                    <OptionComponent sort="A" :content="item.caseA" />
                                </el-checkbox>
                                <el-checkbox label="B" v-if="item.caseB">
                                    <OptionComponent sort="B" :content="item.caseB" />
                                </el-checkbox>
                                <el-checkbox label="C" v-if="item.caseC">
                                    <OptionComponent sort="C" :content="item.caseC" />
                                </el-checkbox>
                                <el-checkbox label="D" v-if="item.caseD">
                                    <OptionComponent sort="D" :content="item.caseD" />
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <!-- 正确答案 -->
                        <!-- 用户答案 -->
                    </div>
                    <div v-if="item.subjectType == 2" class="user-file-desc-main">
                        <div class="user-file-desc" v-if="item.annexUrl">
                            <span>用户附件：{{ item.annexUrl }}</span>
                            <span>
                                <el-link @click="handleDownloadFile(item.annexUrl)">下载</el-link>
                            </span>
                        </div>
                        <div v-else>用户附件：无</div>
                    </div>

                    <el-descriptions title="" :column="1" border>
                        <el-descriptions-item label="用户答案" v-if="item.subjectType != 2">{{ item.studentSelect??'未答题'
                        }}</el-descriptions-item>
                        <el-descriptions-item label="正确答案" v-if="item.subjectType != 2">{{ item.correctCase
                        }}</el-descriptions-item>
                        <el-descriptions-item label="用户得分">{{ item.studentScore??0 }}</el-descriptions-item>
                        <el-descriptions-item label="分值">
                            {{ item.subjectScore }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
                <el-empty v-if="data.length == 0"></el-empty>
                <div class="btns-container">
                    <el-button type="primary" size="large" @click="handleClose">关闭</el-button>
                </div>
            </div>
        </div>
    </ModalComponent>
</template>
<script setup >
import { onMounted, ref } from 'vue'
import OptionComponent from "./option.vue"
import ModalComponent from "@/components/modal/index.vue"
import { close } from "@/utils/modal"
import { findStudentAnswerSituation } from "@/api/gradingTeacher.js"
import { download } from "@/utils/download.js"
const data = ref([])
const handleOpen = async (row) => {
    let res = await findStudentAnswerSituation({
        esId: row.esId
    })
    if (res.success) {
        let entityList = res.entityList;
        entityList = entityList.filter(item => item);
        // 单选，多选，判断，主观题
        //  1 选择题 2主观题 3 多选题 4 判断题
        entityList = entityList.sort((a, b) => {
            let asubjectType = a.subjectType == 2 ? 5 : a.subjectType;
            let bsubjectType = b.subjectType == 2 ? 5 : b.subjectType;
            return asubjectType - bsubjectType;
        })
        data.value = entityList;
    }
}
const handleDownloadFile = (url) => {
    const Host = import.meta.env.VITE_APP_HOST;
    download(url.pop, Host + url, 'url')
}
const handleClose = () => {
    close('score-list-modal')
}
onMounted(() => {
    console.log('mounted!')
})
</script>
<style lang="scss" scoped>
.question-container {
    margin-top: 16px;

    .title-contianer {
        padding-bottom: 16px;

        .head {
            display: flex;
            padding-bottom: 16px;

            .title {
                font-size: 20px;
            }
        }

        .item-block {
            padding-left: 16px;
        }
    }

    .answer-container {
        padding-top: 16px;
        padding-bottom: 16px;

        .head {
            padding-bottom: 16px;
        }


        .user-text {
            >div {
                margin-top: 16px;
            }
        }

        .user-file {
            padding-top: 16px;


        }
    }

    .score-container {
        display: flex;

        .el-input {
            width: 256px;
        }
    }
}

.btns-container {
    padding-top: 32px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.el-radio-group,
.el-checkbox-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.select-container {
    padding-bottom: 16px;
    padding-left: 32px;
}

.user-file-desc-main {
    padding: 16px 0
}

.user-file-desc {
    margin-top: 16px;
    padding: 8px 16px;
    box-sizing: border-box;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    background-color: #eee;
}

.el-checkbox {
    height: auto !important;
    align-items: flex-start;
    margin-bottom: 16px;

    :deep(.el-checkbox__input) {
        margin-top: 8px;
    }
}

.el-radio {
    height: auto !important;
    align-items: flex-start;
    margin-bottom: 16px;

    :deep(.el-radio__input) {
        margin-top: 8px;
    }
}
</style>